<!--公司账户-->
<template>
	<div class="uploaddetail">

		<div class="my_header">
			<i class="mui-icon mui-icon-arrowleft" aria-hidden="true" @click="$router.back(-1)"></i>
			<div class="top1">{{title}}</div>

		</div>
		<div class="txlist">
			<div class="row">
				<div class="left">员工姓名</div>
				<div class="right" v-text="lostdetails.name"></div>
			</div>
			<div class="row">
				<div class="left">性别</div>
				<div class="right" v-text="lostdetails.sex"></div>
			</div>
			<div class="row">
				<div class="left">联系电话</div>
				<div class="right" v-text="lostdetails.mobile"></div>
			</div>
			<div class="row">
				<div class="left">身份证号</div>
				<div class="right" v-text="lostdetails.card"></div>
			</div>
			<div class="row">
				<div class="left">最高学历</div>
				<div class="right" v-text="education"></div>
			</div>

			<div class="row">
				<div class="left">所在地区</div>
				<div class="right">{{lostdetails.province}}/{{lostdetails.city}}</div>
			</div>
			<div class="rowcell">
				<div class="left">名单类型</div>
				<div class="right">{{lostdetails.lost_type}}</div>
			</div>
			<div class="rowcell">
				<div class="left">事件描述</div>
				<div class="right">{{lostdetails.content}}</div>
			</div>
			<div class="rowcell">
				<div class="left">简历展示</div>
				<div class="right">

					<div v-for="(imgitem,index) in imglist" :key="index">
						<img v-bind:src="imgitem">

					</div>

				</div>
			</div>
			<div class="txlist" style="margin-top:0.1.5rem;border-bottom: 1px solid #efefef;">
				<div class="row">
					<div class="left">工作履历</div>

				</div>

			</div>
			<div class="jyrecord lvli">
				<div v-for="(lvliitem,index) in record_resume" :key="index">
					<div class="rowcell">
						<div class="item">
              {{lvliitem.s_time}}-{{lvliitem.e_time}}， {{lvliitem.position}}， {{lvliitem.salary}}元
						</div>
					</div>
				</div>

			</div>

			<div class="row margintop10">
				<div class="left">追偿金额</div>
				<div class="right">{{lostdetails.money}}元</div>
			</div>
			<div class="row">
				<div class="left">所属公司</div>
				<div class="right">{{lostdetails.company}}</div>
			</div>

			<div class="row">
				<div class="left">公司电话</div>
				<div class="right">{{lostdetails.company_mobile}}</div>
			</div>
			<!--   详情审核状态区域-->
			<!-- <div v-show="hideordetail==0">
				<div class="status" v-show="lostdetails.status==2">
					<img src="../../../static/icon_pc/icon/error.png"><span class="error">审核失败</span>

				</div>
				<div class="status" v-show="lostdetails.status==1">
					<img src="../../../dist/static/icon_pc/icon/icon_pass_small.png"><span class="right">审核成功</span>

				</div>
				<div class="status" v-show="lostdetails.status==0">
					<img src="../../../static/icon_pc/icon/wait.png"><span class="shz">审核中</span>
				</div>
			</div> -->
			<!--隐藏区域-->
			<div v-show="hideordetail==1">

				<!-- 隐藏按钮 -->
				<div class="button">
					<button class="btn" @click="maskShow()">立即隐藏</button>
				</div>

			</div>
		</div>

		<!-- 遮罩层背景 -->
		<div class="mask" v-if="bjtos" @click="maskHide()"></div>
		<!-- 隐藏支付弹框内容 -->
		<div class="content" v-if="tos">
			<div class="lines"></div>
			<div class="discontent">
				<div>当前隐藏名单为：<span class="contS">{{lostdetails.name}}</span></div>
				<div>当前隐藏类型为：<span class="contS">{{lostdetails.lost_type}}</span></div>
			</div>
			<h4 id="chose">隐藏期限</h4>
			<!-- 套餐分类 -->
			<ul class="">
				<li class="active list">
					<div class="one">永久</div>
					<div class="price">
						<span class="danjia">￥</span><span class="money">{{money}}</span>
					</div>
					<!-- 选中套餐时显示 -->
					<img class="select" src="static/icon_pc/icon/icon_select.png" alt="">
				</li>
			</ul>
			<h4>支付方式</h4>
			<ul class="count">
				<li @click="clickCurr(3)">
					<img class="img1" v-bind:src="tab==3?'static/icon_pc/icon/pay_select_1_small.png':'static/icon_pc/icon/pay_default_1_small.png'" alt="">
				</li>
				<li @click="clickCurr(1)">
					<img class="img1" v-bind:src="tab==1?'static/icon_pc/icon/pay_select_3_big.png':'static/icon_pc/icon/pay_default_3_big.png'" alt="">
				</li>
			</ul>
			<div class="spanyebz" v-show="isyebz">余额不足</div>
			<!-- 合计 -->
			<div class="total">
				<div class="tol">
					<span class="all">合计：<span class="peo">￥{{money}}</span></span>
				</div>
				<span id="btn" @click="hideInfo()">立即隐藏</span>
			</div>
		</div>

		<!-- 余额支付窗口 -->
		<div class="paybox" v-show="openyezhifu">
			<div class="paytop">
				<img class="colse" src="static/icon_pc/icon/close (2).png" alt="" @click="zfclose">
				<span class="paied">支付</span>
				<span class="makepsd"><router-link to="/setpwd">设置支付密码</router-link></span>
			</div>
			<div class="money">￥9.9
			</div>
			<div class="paypsd">
				<input type="password" maxlength="6" v-model="pay_pwd" placeholder="请输入6位支付密码">
			</div>
			<button class="paybtn" @click="qryepay">确认支付</button>
		</div>

	</div>
</template>

<script>
	export default {

		data() {
			return {
				token: '',
				title: '详情',
				hideordetail: 0,
				type: '',
				lost_type_id: '',
				total: 0,
				currentPage: 1,
				pageSize: 1,
				tableData: [],
				multipleSelection: [],
				num: 6,
				losttypelist: '',
				detail: true,
				imglist: [],
				record_resume: [],
				lostdetails: [],
				education: '',
				money: 0.09,
				tos: false,
				hideList: {},
				current: 1,
				tab: 3,
				pay_pwd: '',
				//余额支付弹框
				openyezhifu: false,
				bjtos: false,

				lostid: '',
				wallet: '',
				isyebz: false

			};
		},
		created: function() {
			var token = localStorage.getItem("token");
			this.token = token;
			var that = this;
			var lostid = this.$route.query.lostiddetail;
			var isshow = this.$route.query.isshow;
			var hide = this.$route.query.hide;
			if(typeof(lostid) != "undefined") {
				console.log(lostid + "去去1");
				that.lostid = lostid,
				that.title = '详情';
				that.getlostdetail(lostid);
                if(typeof(isshow) != "undefined"){
                     if(isshow==1){
                         	that.hideordetail = 0;
					 }else{
						 that.hideordetail =1;
					 }
				}
			

			} else if(typeof(hide) != "undefined") {
				console.log("去去");
				that.title = '隐藏';
				that.lostid = hide,
					that.getlostdetail(hide);
				that.hideordetail = 1;
				that.tos=true;
				that.bjtos=true;
			};

			that.getyeandaccount(token);

		},
		methods: {

			zfclose() {
				var that = this;
				that.openyezhifu = false,
					that.bjtos = false
			},
			//立即隐藏-调起支付
			hideInfo() {
				var that = this;
				if(that.tab == 3) {
					that.openyezhifu = true,
						that.tos = false
				} else {

				}
			},

			//确认余额支付
			qryepay() {
				var that = this;
				that.dqpay();
			},
			//支付请求
			dqpay() {

				var that = this;
				$.ajax({
					type: "post",
					url: "http://zcapi.hrgsxt.cn/api/Hide/index",
					data: {
						token: that.token,
						money: that.money,
						pay_style: that.tab,
						lost_id: that.lostid,
						pay_pwd: that.pay_pwd
					},
					cache: false,
					dataType: "json",
					success: function(data) {
						console.log(JSON.stringify(data) + "立即隐藏数据");
						if(data.code == 200) {
							that.$toast({
								message: data.message,
								duration: 1000
							});

							that.openyezhifu = false,
								that.bjtos = false,
								that.$router.push({
									path: './myupload',

								});
						} else if(data.code == 400) {
							that.$toast({
								message: data.message,
								duration: 1000
							})
						}

					}
				});

			},

			//隐藏支付
			maskShow() {
				this.tos = true,
					this.bjtos = true
			},
			maskHide() {
				this.tos = false,
					this.bjtos = false
			},
			clickCurr(index) {
				this.tab = index
				// console.log(this.tab.toString())
			},

			//我的上传详情
			getlostdetail(lostid) {
				console.log(lostid + "私信id");
				var that = this;
				$.ajax({
					type: "get",
					url: "http://zcapi.hrgsxt.cn/api/User_lost/info",
					data: {
						token: localStorage.getItem("token"),
						lost_id: lostid
					},
					cache: false,
					dataType: "json",
					success: function(data) {

						if(data.code == 200) {
							that.imglist = [];
							that.detail = false;
							that.sex = data.data.sex,
							that.lostdetails = data.data;
							that.record_resume = data.data.record_resume;
							that.imglist = JSON.parse(JSON.stringify(data.data.img));
							that.geteducation(data.data.education_id);
							console.log(JSON.stringify(data.data) + "我的上传详情数据");
						}
					}
				});
			},

			//获取账户余额和查询次数
			getyeandaccount(token) {
				var that = this;
				$.ajax({
					type: "get",
					url: "http://zcapi.hrgsxt.cn/api/Welcome/user",
					data: {
						token: token
					},
					cache: false,
					dataType: "json",
					success: function(data) {
						console.log(JSON.stringify(data) + "账户余额");
						if(data.code == 200) {
							that.wallet = data.data.wallet;
							if(data.data.wallet < that.money) {
								that.isyebz = true
							}
						} else {

						}
					}
				});
			},

			geteducation(id) {
				var that = this;
				$.ajax({
					type: "get",
					url: "http://zcapi.hrgsxt.cn/api/Welcome/education",
					data: {

					},
					cache: false,
					dataType: "json",
					success: function(data) {
						if(data.code == 200) {
							for(var i = 0; i < data.data.length; i++) {
								if(data.data[i].education_id == id) {
									that.education = data.data[i].name;
								}
							}
							console.log(JSON.stringify(data.data) + "学历信息");
						}

					}
				});
			}

		},

		watch: {
			// 如果路由有变化，会再次执行该方法
			'$route': 'fetchData'
		}
	}

	//图片上传并预览
</script>

<style scoped>
	/* 余额支付弹窗 */
	
	.spanyebz {
		color: red;
		margin: -0.06rem 0px 0.2rem.35rem;
		font-size: 0.18rem;
	}
	
	.paybox {
		width: 5.61rem;
		height: 5.69rem;
		position: absolute;
		top: 20%;
		left: 50%;
		margin-left: -2.8rem;
		padding: 0 .3rem;
		background-color: #fff;
		z-index: 99;
		position: fixed;
	}
	
	.paybox .paytop {
		height: 1rem;
		line-height: 1rem;
	}
	
	.paybox .colse {
		width: .23rem;
		height: .23rem;
		border: .001rem dashed #efefef;
	}
	
	.paied {
		margin-left: 38%;
		font-size: .36rem;
		font-weight: bold;
		color: #333;
	}
	
	.paybox .makepsd {
		float: right;
		color: #1B84E3;
		font-size: .3rem;
	}
	
	.paybox .makepsd a {
		color: #1B84E3;
	}
	
	.paybox .money {
		height: 1.6rem;
		line-height: 1.6rem;
		text-align: center;
		color: #333;
		font-size: .72rem;
		font-weight: bold;
	}
	
	.paybtn {
		width: 100%;
		height: .95rem;
		color: #fff;
		font-size: .36rem;
		text-align: center;
		background-color: #16AD12;
		margin-top: .3rem;
	}
	/* 隐藏按钮 */
	
	.button {
		text-align: center;
		background-color: #fff;
		margin-bottom: .5rem;
		margin-top: .5rem;
	}
	
	.btn {
		width: 7rem;
		height: .88rem;
		background: rgba(0, 133, 240, 1);
		border-radius: .15rem;
		color: #FFFFFF;
	}
	/* 遮罩层部分 */
	
	.mask {
		width: 100%;
		height: 100%;
		background-color: #000;
		opacity: 0.4;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
	}
	
	.content {
		width: 100%;
		background: rgba(255, 255, 255, 1);
		border-radius: 25px 25px 0px 0px;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;
		margin-bottom: 0.88rem;
	}
	
	.lines {
		width: 1.6rem;
		height: .1rem;
		background: rgba(204, 204, 204, 1);
		border-radius: 5px;
		position: absolute;
		top: .2rem;
		left: 50%;
		margin-left: -.8rem;
	}
	/* 当前隐藏 */
	
	.discontent {
		width: 6.9rem;
		height: 1.56rem;
		position: absolute;
		top: 10%;
		left: 50%;
		margin-left: -3.5rem;
		line-height: 1.56rem;
		border: .001rem solid #ccc;
		padding-top: .29rem;
		padding-left: .2rem;
	}
	
	.discontent div {
		font-size: .24rem;
		height: .4rem;
		line-height: .3rem;
		color: #666;
	}
	/* 隐藏期限 */
	
	#chose {
		margin-top: 2.8rem;
	}
	
	ul {
		width: 100%;
		background-color: #fff;
		padding: .3rem;
		overflow: hidden;
	}
	
	.list {
		width: 2.2rem;
		height: 1.6rem;
		text-align: center;
		position: relative;
		float: left;
		margin-bottom: .15rem;
		border: .01rem solid #ccc;
	}
	
	.list:nth-child(3n-1) {
		margin: 0 .15rem 0 .15rem;
	}
	
	.one {
		height: .26rem;
		font-size: .28rem;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 36px;
	}
	
	.price {
		margin-top: .39rem;
		line-height: 36px;
	}
	
	.price .danjia {
		font-size: .22rem;
		color: #999;
		padding-right: .05rem;
	}
	
	.price .money {
		color: #FF3000;
		font-size: .5rem;
		height: .38rem;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
	}
	
	.active {
		border: .01rem solid #0085F0;
	}
	
	.select {
		position: absolute;
		bottom: 0;
		right: 0;
	}
	/* 支付方式 */
	
	.lines {
		width: 1.6rem;
		height: .1rem;
		background: rgba(204, 204, 204, 1);
		border-radius: 5px;
		position: absolute;
		top: .2rem;
		left: 50%;
		margin-left: -.8rem;
	}
	
	h4 {
		font-size: .3rem;
		color: #333;
		margin: 0 0 0 .3rem;
	}
	
	.count li {
		float: left;
	}
	
	.count li:nth-child(2) {
		margin-left: .15rem;
		margin-right: .15rem;
	}
	
	.count li img {
		width: 2.2rem;
		height: .88rem;
	}
	/* 总计 */
	
	.total {
		width: 100%;
		height: .88rem;
		line-height: .88rem;
		border-top: .01rem solid #ccc;
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
	}
	
	.total .tol {
		padding-left: 0.3rem;
		float: left;
	}
	
	.all {
		font-size: .3rem;
		color: #333;
	}
	
	.all .peo {
		color: #ff3000;
	}
	
	#btn {
		display: block;
		width: 2.2rem;
		height: .88rem;
		color: #fff;
		font-size: .3rem;
		line-height: .88rem;
		text-align: center;
		border: none;
		background-color: #0085f0;
		border-radius: 0;
		/* margin-left: 5rem; */
		float: right;
	}
	
	.lvli .rowcell .item {
		line-height: 0.5rem !important;
	}
	
	.status {
		padding: 0.25rem 0.45rem;
		font-size: 0.3rem;
	}
	
	.status img {
		width: 0.35rem;
		height: 0.35rem;
		vertical-align: middle;
		margin-right: 5px;
	}
	
	.error {
		color: #FC355D;
	}
	
	.shz {
		color: #0085F0;
	}
	
	.right {
		color: rgb(62, 185, 88);
	}
	/*查询记录*/
	
	.margintop10 {
		margin-top: 10px;
	}
	
	.jyrecord {
		background-color: #FFFFFF;
		padding-left: 0.7rem;
	}
	
	.jyrecord .rowcell {
		width: 100%;
		color: #666666;
		background-color: #FFFFFF;
		font-size: 0.26rem;
		padding: 0.26rem 0.35rem 0.26rem 0rem !important;
		border-bottom: 1px solid #efefef;
	}
	/*.jyrecord .row:first-child {
		border-bottom: 1px solid #efefef;
	}
	*/
	
	.jyrecord .row .item {
		color: #666666;
		width: 100%;
		float: left;
		font-size: 0.28rem;
		line-height: 0.88rem;
		text-align: left;
	}
	
	.submit {
		background-color: #0085F0;
		font-size: 0.34rem;
		color: #FFFFFF;
		width: 90%;
		margin-left: 5%;
		margin-top: 5%;
		height: 0.88rem;
		line-height: 0.88rem;
		border-radius: 12px;
	}
	
	.my_header .top1 {
		margin-right: 20px;
	}
	
	.my_header {
		height: .88rem;
		background: rgba(0, 133, 240, 1);
		text-align: center;
		color: #fff;
		line-height: .88rem;
		position: relative;
		padding: 0 .3rem;
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 999;
	}
	
	.my_header i {
		font-size: .4rem;
		float: left;
		line-height: .88rem;
	}
	
	.myaccount .my_header .top1 {
		width: 40%;
		margin-left: 25%;
		float: left;
		text-align: center;
	}
	
	.myaccount .my_header .cmaccount {
		float: right;
		font-size: 0.28rem;
	}
	
	.uploaddetail {
		margin-top: 0.88rem;
	}
	
	.txlist .row {
		width: 100%;
		height: 0.88rem;
		background-color: #FFFFFF;
		line-height: 0.88rem;
		padding: 0px 0.35rem 0px 0.3rem;
		border-bottom: 1px solid #EFEFEF;
	}
	
	.txlist .row:last-child {
		border-bottom: none;
	}
	
	.txlist .row .left {
		width: 20%;
		float: left;
		font-size: 0.3rem;
	}
	
	.txlist .row .left span {
		color: red;
		margin-right: 5px;
		margin-left: -9px;
	}
	
	.txlist .row .right {
		color: #666666;
		width: 80%;
		float: right;
		font-size: 0.26rem;
		line-height: 0.88rem;
		text-align: right;
		height: 0.88rem;
	}
	
	.txlist .rowcell {
		border-bottom: 1px solid #EFEFEF;
		background-color: #FFFFFF;
		overflow: auto;
		padding: 0.26rem 0.35rem 0.26rem 0.3rem;
	}
	
	.txlist .rowcell .left {
		width: 20%;
		float: left;
		font-size: 0.3rem;
	}
	
	.txlist .rowcell .right {
		padding-left: 0.3rem;
		color: #666666;
		width: 80%;
		float: right;
		font-size: 0.26rem;
		line-height: 0.4rem;
		text-align: left;
	}
	
	.txlist .rowcell .right img {
		width: 1.7rem;
	}
</style>
